import React, { Component } from 'react'

 import {

    Modal,
    Form,
    Input,
    Tree
 } from 'antd'
 import menuList from '../../components/left_nav/menulist.js'

 const Item = Form.Item
 const { TreeNode,DirectoryTree } = Tree;


 
 class AuthForm extends Component {
    constructor(props){
       
        super(props);
        const {menus} = this.props.role
        this.state={
            checkedKeys:menus
        }
    }

 



        onSelect = (keys, event) => {
            console.log('Trigger Select', keys, event);
        };
    

        // 展开收起节点时触发
      onExpand = () => {
        console.log('Trigger Expand');
      };



       getTreeNodes=(menulist)=>{
         return  menulist.reduce(((pre,item)=>{
               pre.push(
                <TreeNode title={item.title} key={item.key}>
                
                {item.children ? this.getTreeNodes(item.children):null }
                </TreeNode>
               )

               return pre

           }),[])

         
       }
    

       onCheck = checkedKeys => {
        console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });
      };
    
       componentWillMount(){
           this.treeNodes = this.getTreeNodes(menuList)
       }

       getMenusNode = ()=> this.state.checkedKeys

       componentWillReceiveProps(nextProps) {
           const menus = nextProps.role.menus

           this.setState({
               checkedKeys:menus
           })
          console.log('新属性更新===》',nextProps)
       }
       
       
    render() {
   
        const {visible,onOk,onCancel,role} = this.props

        const {checkedKeys} = this.state
        return (
            <div>
                <Modal
                  visible={visible}
                  onOk={onOk}
                  onCancel={onCancel}
                
                >
                    <Item label="角色名称">
                        <Input  value={role.name} disabled />
                   </Item>
                    <Tree 
                     defaultExpandAll 
                     checkable
                     checkedKeys={checkedKeys}
                     onCheck={this.onCheck}
                    >
                        <TreeNode title="平台权限" key="all">
                            {this.treeNodes}
                        </TreeNode>
                       
                    </Tree>
                </Modal>
            </div>
        )
    }
}

export default AuthForm
